<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>延时器</title>
</head>

<body>
    <button id="cancle">取消延时器</button>
    <button id="cancle1">取消定时器</button>
    <script>
        cancleBtn = document.getElementById('cancle')
        cancleBtn1 = document.getElementById('cancle1')

        function foo() {
            console.log('foo is call');
            alert('5s之后关闭')
        }
        console.log('start')
            // var timer = setTimeout(foo, 2000)

        function cancleTime() {
            clearTimeout(timer);
            console.log('取消了关闭！')
        };

        cancleBtn.addEventListener('click', cancleTime)

        var i = 1;
        var timer1 = setInterval(function() {

            console.log(`定时器打印第${i}次`)
            i++
        }, 1000);

        cancleBtn1.onclick = function() {
            clearInterval(timer1)
        }
    </script>
</body>

</html>